<template>
  <div id="world-box">
    <!-- <div id="map-box">
      <right-sub @mapIsLoad="mapIsLoad"></right-sub>
    </div> -->

    <div id="app">
      <router-view v-if="isLoad" />
    </div>

    <canvas id="glcanvas" height="0" width="0"></canvas>
  </div>
</template>

<script>
const { ipcRenderer } = window.require('electron');
import rightSub from '@/components/layoutSubassemb/rightSub.vue';
export default {
  name: "app",

  components: { rightSub },

  data () {
    return {
      isLoad: true,
      winSize: [],
      bottomData: null,
      isSplitScreen: false,
      isLeftTrigger: false,
      isRightTrigger: false,
      isReload: false
    };
  },

  methods: {
    init () {
      this.setScreen();
      this.mapContentSize();
      this.pointerOffset();
    },

    setScreen () {
      // 计算分辨率差来修改maximumScreenSpaceError
      $("#app").css("width", window.basicWidth);
      $("#app").css("height", window.basicHeight);
      if (window.turnOnZoom) {
        let num = this.winSize[0] / window.basicWidth;
        let scaleY = this.winSize[1] / window.basicHeight;
        $("#app").css({
          transform: "scale(" + num + "," + scaleY + ")",
          transformOrigin: "left top",
          backgroundSize: "100%",
        });
        document.getElementById("app").style.setProperty("--scale", num);
        let style = {
          transform: "scale(" + num + "," + scaleY + ") !important",
          "transform-origin": "left top",
        };
        window.scale = {
          x: num,
          y: scaleY,
        };
        console.log(`横轴的缩放比例${num},纵轴的缩放比例${scaleY}`);
        this.styleCompatibility(style);
      } else {
        document.getElementById("app").style.setProperty("--scale", 1);
      }
    },

    styleCompatibility (styleObj) {
      let styleNode = document.createElement("style");
      let styleStr = "";
      styleNode.setAttribute("type", "text/css");
      for (let i in styleObj) {
        styleStr += `${i}:${styleObj[i]};`;
      }
      // cesium内弹窗样式缩放
      styleNode.innerHTML = `
              .cesium-map{
                overflow:hidden;
              }
              .popup-box
            `;
      let headNode = document.querySelector("head");
      headNode.appendChild(styleNode);
    },

    mapContentSize () {
      const element = $('#map-box');
      if (element) {
        element.css('padding', `${94 * window.scale.y}px 0 0 ${306 * window.scale.x}px`);
      }

    },

    pointerOffset () {
      const element = document.querySelector('#map-box');
      if (element) {
        element.style.top = `${8 * window.scale.y}%`;
        element.style.right = `${21.8 * window.scale.x}%`;
      }
    },

    mapIsLoad (state) {
      this.isLoad = state;
    },

    getGPU () {
      const canvas = document.createElement('canvas'),
        gl = canvas.getContext('experimental-webgl'),
        debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
      const info = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); // GPU 型号，e.g., Intel Iris OpenGL Engine
      return info;
    }
  },
  created () {
    const GPUinfo = this.getGPU();
    let title = `3D Viewer v${process.env.VUE_APP_VERSION}`
    if (process.env.NODE_ENV === 'development') {
      title += ' test'
    }
    document.title = title
  },

  mounted () {
  }
};
</script>

<style lang="less" scoped>
#world-box {
  position: relative;

  #map-box {
    // position: absolute;
    // top: 94px;
    // left: 306px;
    width: 100%;
    height: 100%;
    padding: 94px 0 0 306px;
    box-sizing: border-box;
  }

  // #app {
  //   position: absolute;
  //   left: 0;
  //   top: 0;
  //   width: 100%;
  //   height: 100%;
  //   pointer-events: none;
  //   z-index: 9999;
  // }
}
</style>